import React from "react";

import { connect } from "react-redux";

const mapStateToProps = (state) => {
  return {
    list: state.list,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    remove(id) {
      dispatch({ type: "remove", id });
    },
  };
};

const List = connect(
  mapStateToProps,
  mapDispatchToProps
)((props) => {
  const del = (id) => () => {
    props.remove(id);
  };

  return (
    <ul>
      {props.list.map((item) => (
        <li key={item._id}>
          {item.title} - <button onClick={del(item._id)}>删除</button>
        </li>
      ))}
    </ul>
  );
});

export default List;
